<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title> 这是一个 故障按钮动画 </title>
		<style type="text/css">
			body {
				display: flex;
				justify-content: center;
				align-items: center;
				min-height: 100vh;
				background: hsl(240, 56%, 98%);
			}
			
			.glitch {
				filter: url('#glitch');
			}
		</style>
	</head>

	<body>
		<svg width="0" height="0" class="absolute">
			<filter id="glitch">
				<feTurbulence type="fractalNoise" baseFrequency="0.00001 0.000001" numOctaves="1" result="turbulence1">
					<animate attributeName="baseFrequency" from="0.00001 0.000001" to="0.00001 0.4" dur="0.4s" id="glitch1" fill="freeze" repeatCount="indefinite"></animate>
					<animate attributeName="baseFrequency" from="0.00001 0.4" to="0.00001 0.2" dur="0.2s" begin="glitch1.end" fill="freeze" repeatCount="indefinite"></animate>
				</feTurbulence>
				<feDisplacementMap in="SourceGraphic" in2="turbulence1" scale="30" xChannelSelector="R" yChannelSelector="G" result="displacementMap" />
			</filter>
		</svg>
		<div class="flex space-x-8">
			<button class="btn btn-primary btn-glitch">Glitch</button>
		</div>
		<script type="text/javascript">
			const sleep = (time) => new Promise((resolve) => setTimeout(resolve, time));
			const glitchBtn = document.querySelector(".btn-glitch");
			glitchBtn.addEventListener("mouseover", async() => {
				glitchBtn.classList.add("glitch");
				await sleep(600);
				glitchBtn.classList.remove("glitch");
			});
		</script>
	</body>

</html>